As with many kinds of apps, there are difficult issues to solve when we write JavaScript apps. In this article, we’ll look at some solutions to common JavaScript problems.
The Difference Between decodeURIComponent and decodeURI
decodeURI is intended for decoding the whole URI.
decodeURIComponent is used for decoding the parts between separators.
We can pass in the parts and convert it back to the original URL.
For instance, we can write:
decodeURIComponent('%26')
and get '&' ,
However, when we write:
decodeURIComponent('%26')
We get back the original string.
However, if we write:
decodeURI('%41')
or:
decodeURIComponent('%41')
'A' is returned.
This means that decodeURIomponent can decode alphanumeric values and symbols.
But decodeURI can only decode alphanumeric values.
Open URL in the Same Window and in the Same Tab
We can open URLs in the same window and tab with if we use window.open with the argument '_self' .
For example, we can write:
window.open("https://www.example.com","_self");
Then the https://example.com URL will open in the same window.
Also, we can set the URL as the value of the location.href property to do the same thing:
location.href = "https://www.example.com";
Redirecting to a Relative URL
We can redirect to a relative URL if we set location.href to a relative path.
For instance, we can write:
window.location.href = '../';
to redirect one level up.
If we want to go to a path, we can write:
window.location.href = '/path';
to go to the path relative to the current domain.
Listen to change Events in a content editable Element
If we add a contenteditable attribute to an element, we can listen to the input event to watch for inputs.
For instance, if we have:
<div contenteditable="true" `id="editor"`>enter text</div>
Then to get the data that we typed into the div, we can listen to the input event:
document.getElementById("editor").addEventListener("input", () => {
console.log("text inputted");
}, false)
We get the editor div and attach the input listener to it.
Then we should see the console log.
Process Each Letter of Text
We can loop through each letter of text using a loop and use the charAt method.
For instance, we can write:
for (const i = 0; i < str.length; i++) {
console.log(str.charAt(i));
}
We can also use a while loop to do the same thing:
while (i--) {
console.log(str.charAt(i));
}
Also, we can spread it into an array and use forEach to loop through each character:
[...`str`].forEach(c => console.log(c))
We can also use a for-of loop to loop through a string directly:
for (const c of str) {
console.log(c)
}
And we can also use the split method to split it into an array of characters and loop through it:
str.split('').forEach((c) => console.log(c));
Remove a Character from a String
To remove a character from a string, we can use the replace method to do it.
For instance, we can write:
const str = "foo";
const newStr = str.replace('f', '');
Then we remove the 'f' character from the string.
We can also do the same thing with split and join :
const newStr = str.split('f').join('');
We split the string using 'f' as the separator and return an array of the parts separated by it.
Then we use join to join the parts back together.
Difference Between console.dir and console.log
There are differences between console.dir and console.log , even though they do the same thing.
log prints out the toString representation of an object, but dir prints out the whole object tree in Firefox.
In Chrome, console.log prints out the tree most of the time.
But it still prints the stringified version in some of the cases even if it has properties.
For instance, it’ll print out the stringified form of an HTML element.
console.dir always prints the object tree.
Create an HTTPS Server in Node.js
To create an HTTPS server with Node.js, we can read the certificate and private key into the server program.
Then we set the credentials when loading the server to make it use the certificate.
For instance, we can write:
const crypto = require('crypto');
const fs = require("fs");
const http = require("http");
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
https.createServer(options, (req, res) => {
res.writeHead(200);
res.end("hello worldn");
}).listen(8000);
We read the private key and certificate with the readFileSync calls.
Then we put the key and certificate in the options object.
When we call createServer , we pass in the key and certificate through the object.
Conclusion
We can iterate through each letter of the text in various ways. To create a secure HTTP server, we can read in the private key and certificate. decodeURI and decodeURIComponent are different.console.dir always print the object tree.
